<template>
  <div class="table-box card">
    <div class="card__header">
      <div>
        <el-button style="margin-right: 24px" type="primary">新增服务</el-button>
        <el-button style="margin-right: 10px" type="primary">新增服务</el-button>
        <el-button>删除</el-button>
      </div>
      <div class="header-button-ri">
        <el-input
          class="inline-block"
          placeholder="请输入业务名称进行搜索"
          style="width: 280px;margin-right: 8px"
        ></el-input>
        <el-button icon="Search" type="primary">查询</el-button>
        <el-button icon="RefreshRight">重置</el-button>
      </div>
    </div>
    <div class="cara_box">
      <div class="cara_box_left">
        <el-tabs class="demo-tabs" style="height: 200px" tab-position="left">
          <el-tab-pane>
            <template #label>

              <div class="label_tit">
                <span style="margin-right: 10px">商标服务</span>
                <el-dropdown trigger="click">
                  <div class="avatar">
                    <el-icon style="transform: rotate(90deg);">
                      <MoreFilled/>
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="openDialog('infoRef')">
                        <el-icon>
                          <User/>
                        </el-icon>
                        {{ $t("header.personalData") }}
                      </el-dropdown-item>
                      <el-dropdown-item @click="openDialog('passwordRef')">
                        <el-icon>
                          <Edit/>
                        </el-icon>
                        {{ $t("header.changePassword") }}
                      </el-dropdown-item>
                      <el-dropdown-item divided @click="logout">
                        <el-icon>
                          <SwitchButton/>
                        </el-icon>
                        {{ $t("header.logout") }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </div>

            </template>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>

              <div class="label_tit">
                <span style="margin-right: 10px">专利服务</span>
                <el-icon style="transform: rotate(90deg);">
                  <MoreFilled/>
                </el-icon>
              </div>

            </template>
          </el-tab-pane>
          <el-tab-pane label="版权服务">
            <template #label>

              <div class="label_tit">
                <span style="margin-right: 10px">版权服务</span>
                <el-icon style="transform: rotate(90deg);">
                  <MoreFilled/>
                </el-icon>
              </div>

            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding-left: 10px !important;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;

  .header-button-ri {
    display: flex;
  }
}

.cara_box {
  .cara_box_left {
    .label_tit {
      width: 72px;
      height: 38px;
      border-radius: 0px 0px 0px 0px;

      display: flex;
      align-items: center;
    }
  }
}
</style>
